<template>
  <view class="head">
    <u-navbar title="我的账户" :placeholder="true" :autoBack="true"> </u-navbar>
  </view>
  <view class="accountbox"
    ><view class="account" v-for="(item, index) in accountlist" :key="index">
      <view class="account-head">
        <view class="account-title-top"> 总资产(元) </view>
        <view class="account-title-bottom">
          {{ item.now.toFixed(2) }}
        </view>
      </view>
      <view class="account-bottom">
        <view class="account-left width">
          <view class="account-title-top"> 累计充值(元) </view>
          <view class="account-title-bottom">
            {{ item.topup.toFixed(2) }}
          </view>
        </view>
        <view class="account-right width">
          <view class="account-title-top"> 累计消费(元) </view>
          <view class="account-title-bottom">
            {{ item.spend.toFixed(2) }}
          </view>
        </view>
      </view>
    </view></view
  >
  <!-- 金刚区 -->
  <view class="Orderforgoods">
    <view class="Orderforgoods-list">
      <view
        class="Orderforgoods-for-content"
        v-for="(item, index) in konglist"
        :key="index"
      >
        <img :src="item.image" alt="" class="img"/>
        <view class="Orderforgoodstit">{{ item.title }}</view>
      </view>
    </view>
  </view>
  <!-- 优惠卷 -->
  <view class="coupon">
    <view class="coupon-left">
      <view class="coupon-left-top">领取优惠卷</view>
      <view class="coupon-left-bottom">满减享优惠</view>
    </view>
    <view class="coupon-right">
      <img
        src="http://uniqn.zmycode.top/%E6%88%91%E7%9A%84%E4%BC%98%E6%83%A0%E5%8D%B7.png"
        alt="" class="img"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { accountlist, konglist } from "./mine-account.js";
</script>

<style lang="scss" scoped>
.accountbox {
  background-color: #fff;
  padding: 20rpx;
}
.account {
  padding: 20rpx;
  // margin: 20rpx;
  box-sizing: border-box;
  background-color: #fb5579;
  // width: 100%;
  border-radius: 10rpx;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .account-title-top {
    color: #fad2da;
    font-size: 28rpx;
  }
  .account-title-bottom {
    color: #fff;
    font-size: 30rpx;
  }
  .account-bottom {
    display: flex;
    justify-content: space-between;
    .width {
      width: 50%;
    }
  }
}
.Orderforgoods {
  background-color: #fff;
  margin: 20rpx 20rpx 0 20rpx;
  border-radius: 20rpx;
  .Orderforgoodshead {
    border-bottom: 1px solid #f5f5f5;
  }
  .Orderforgoods-list {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-around;
    .Orderforgoods-for-content {
      text-align: center;
      font-size: 26rpx;
      color: #545454;
      line-height: 40rpx;
      .img {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
.coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: #FFF3F3;
  .coupon-left{
    .coupon-left-top{
      color: #FA6493;
      font-size: 28rpx;
    }
    .coupon-left-bottom{
      color: #ff8bb0;
      font-size: 28rpx;
    }
  }
  .coupon-right{
    .img{
      width: 50rpx;
      height: 50rpx;
    }
  }
}
</style>
